<%--
  Created by IntelliJ IDEA.
  User: ZhengJianFei
  Date: 2024/9/7
  Time: 14:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">


    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <!-- Font Awesome -->
    <!-- Ionicons -->
    <!-- iCheck -->
    <!-- Morris chart -->
    <!-- jvectormap -->
    <!-- Date Picker -->
    <!-- Daterange picker -->
    <!-- Bootstrap time Picker -->
    <!--<link rel="stylesheet" href="${pageContext.request.contextPath}/static/${pageContext.request.contextPath}/static/${pageContext.request.contextPath}/static/plugins/timepicker/bootstrap-timepicker.min.css">-->
    <!-- bootstrap wysihtml5 - text editor -->
    <!--数据表格-->
    <!-- 表格树 -->
    <!-- select2 -->
    <!-- Bootstrap Color Picker -->
    <!-- bootstrap wysihtml5 - text editor -->
    <!--bootstrap-markdown-->
    <!-- Theme style -->
    <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
    <!-- Ion Slider -->
    <!-- ion slider Nice -->
    <!-- bootstrap slider -->
    <!-- bootstrap-datetimepicker -->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <!-- jQuery 2.2.3 -->
    <!-- jQuery UI 1.11.4 -->
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <!-- Bootstrap 3.3.6 -->
    <!-- Morris.js charts -->
    <!-- Sparkline -->
    <!-- jvectormap -->
    <!-- jQuery Knob Chart -->
    <!-- daterangepicker -->
    <!-- datepicker -->
    <!-- Bootstrap WYSIHTML5 -->
    <!-- Slimscroll -->
    <!-- FastClick -->
    <!-- iCheck -->
    <!-- AdminLTE App -->
    <!-- 表格树 -->
    <!-- select2 -->
    <!-- bootstrap color picker -->
    <!-- bootstrap time picker -->
    <!--<script src="${pageContext.request.contextPath}/static/${pageContext.request.contextPath}/static/${pageContext.request.contextPath}/static/plugins/timepicker/bootstrap-timepicker.min.js"></script>-->
    <!-- Bootstrap WYSIHTML5 -->
    <!--bootstrap-markdown-->
    <!-- CK Editor -->
    <!-- InputMask -->
    <!-- DataTables -->
    <!-- ChartJS 1.0.1 -->
    <!-- FLOT CHARTS -->
    <!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
    <!-- FLOT PIE PLUGIN - also used to draw donut charts -->
    <!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
    <!-- jQuery Knob -->
    <!-- Sparkline -->
    <!-- Morris.js charts -->
    <!-- Ion Slider -->
    <!-- Bootstrap slider -->
    <!-- bootstrap-datetimepicker -->
    <!-- 页面meta /-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/morris/morris.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/select2/select2.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/static/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>

<body class="hold-transition skin-purple sidebar-mini">

<!-- 页面头部 -->
<!-- 页面头部 /-->

<!-- 导航侧栏 -->
<!-- 导航侧栏 /-->

<!-- 内容区域 -->
<!-- @@master = admin-layout.html-->
<!-- @@block = content -->


<!-- 内容头部 -->
<!-- 内容头部 /-->


<!--基础控件-->
<form action="${pageContext.request.contextPath}/user/addUser.do" method="post" enctype="multipart/form-data">
    <div class="tab-pane" id="tab-common">
        <div class="row data-type">

            <div class="col-md-2 title">用户名</div>
            <div class="col-md-4 data">
                <input type="text" class="form-control" name="username" placeholder="用户名" value="">
            </div>

            <div class="col-md-2 title">密码</div>
            <div class="col-md-4 data">
                <input type="password" class="form-control" name="password" placeholder="密码" value="">
            </div>

            <div class="col-md-2 title">手机号</div>
            <div class="col-md-4 data">
                <div class="input-group">
                    <input type="text" class="form-control" name="phone" placeholder="手机号">
                </div>
            </div>
            <div class="col-md-2 title">性别</div>
            <div class="col-md-4 data">
                <div class="form-group form-inline">
                    <div class="radio"><label><input type="radio" name="sex" value="男"> 男</label></div>
                    <div class="radio"><label><input type="radio" name="sex" value="女"> 女</label></div>
                </div>
            </div>
            <div class="col-md-2 title">生日</div>
            <div class="col-md-10 data">
                <div class="input-group date">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <input type="date" name="birthday" pattern="yyyy-MM-dd" class="form-control pull-right"
                           id="datepicker">
                </div>
            </div>

            <div class="col-md-2 title">文件上传</div>
            <div class="col-md-10 data">
                <a href="javascript:;" class="a-upload">
                    <input type="file" name="file" id="">点击这里上传文件
                </a>
            </div>

            <div class="col-md-2 title">爱好</div>
            <div class="col-md-10 data line-height36">
                <div class="form-group form-inline">
                    <div class="checkbox"><label><input name="hobby" type="checkbox" value="蓝球"> 蓝球</label></div>
                    <div class="checkbox"><label><input name="hobby" type="checkbox" value="红球"> 红球</label></div>
                    <div class="checkbox"><label><input name="hobby" type="checkbox" value="黄球"> 黄球</label></div>
                </div>
            </div>
            <div class="col-md-2 title">省</div>
            <div class="col-md-4 data">
                <select name="sheng" id="sheng" class="form-control">
                    <option></option>
                </select>
            </div>
            <div class="col-md-2 title">市</div>
            <div class="col-md-4 data">
                <select name="shi" id="shi" class="form-control">
                    <option></option>
                </select>
            </div>
            <div class="col-md-2 title">区</div>
            <div class="col-md-4 data">
                <select name="qu" id="qu" class="form-control">
                    <option></option>
                </select>
            </div>


            <div class="col-md-2 title"></div>
            <div class="col-md-10 data text-center">
                <button type="submit" class="btn bg-maroon">保存</button>
                <button type="reset" class="btn bg-default" onclick="history.back(-1);">返回</button>
            </div>

        </div>
    </div>
</form>
<!--基础控件/-->

<!-- 正文区域 /-->

<!-- @@close -->
<!-- 内容区域 /-->

<!-- 底部导航 -->
<!-- 底部导航 /-->


<script src="${pageContext.request.contextPath}/static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/jQueryUI/jquery-ui.min.js"></script>
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<script src="${pageContext.request.contextPath}/static/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/raphael/raphael-min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/morris/morris.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/knob/jquery.knob.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/daterangepicker/moment.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/daterangepicker/daterangepicker.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/fastclick/fastclick.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/iCheck/icheck.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/adminLTE/js/app.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/treeTable/jquery.treetable.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/select2/select2.full.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/bootstrap-markdown/js/markdown.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/bootstrap-markdown/js/to-markdown.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/ckeditor/ckeditor.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/input-mask/jquery.inputmask.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/chartjs/Chart.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/flot/jquery.flot.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/flot/jquery.flot.categories.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="${pageContext.request.contextPath}/static/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script>
    //返回省的数据
    $.get("${pageContext.request.contextPath}/user/city/0.do",function (data){
        var cityN=data;
        for (let i = 0; i < cityN.length; i++) {
            $("#sheng").append("<option value='"+cityN[i].name+"'>"+cityN[i].name+"</option>")
        }
    });
    $("#sheng").change(function (){
        let cityName= $("#sheng option:selected").val();
        $("#shi").text("")
       var cityNameEnd=cityName.charAt(cityName.length-1)
        if (cityNameEnd=="市"){
            $("#qu").text("")
            $.get("${pageContext.request.contextPath}/user/cityName.do",{"cityName":cityName},function (data){
                var cityI=data;
                for (let i = 0; i < cityI.length; i++) {
                    $("#shi").append("<option value='"+cityI[i].name+"'>"+cityI[i].name+"</option>")
                    $("#qu").append("<option value='"+cityI[i].name+"'>"+cityI[i].name+"</option>")
                }
            });
        }else {
            $.get("${pageContext.request.contextPath}/user/cityName.do",{"cityName":cityName},function (data){
                var cityI=data;
                for (let i = 0; i < cityI.length; i++) {
                    $("#shi").append("<option value='"+cityI[i].name+"'>"+cityI[i].name+"</option>")
                }
                shiName= data[0].name;
                $("#qu").text("")
                $.get("${pageContext.request.contextPath}/user/cityName.do",{"cityName":shiName},function (data){
                    var cityI=data;
                    for (let i = 0; i < cityI.length; i++) {
                        $("#qu").append("<option value='"+cityI[i].name+"'>"+cityI[i].name+"</option>")
                    }
                });


            });
        }


    });



</script>
</body>

</html>
